<template>
  <x-layout :bg-color="curBgColor">
    <template #scroll>
      <view
        class="p-20rpx flex flex-col gap-20rpx"
      >
        <view class="flex justify-between p-20rpx">
          <view class="flex flex-col gap-20rpx">
            <view
              class="text-44 font-700 color-#1b1b1b"
            >
              {{ curData.title }}
            </view>
            <view
              class=" text-28 color-#1b1b1b"
            >
              {{ curDay }}
            </view>
            <view class="color-#666 text-28">
              {{ curData.shortcomment }}
            </view>
            <view class="flex gap-20rpx">
              <view class="color-#666 text-28">
                宜：{{ curData?.todo?.yi }}
              </view>
              <view class="color-#666 text-28">
                忌：{{ curData?.todo?.ji }}
              </view>
            </view>
          </view>
          <image
            :src="curUrl"
            class="w-200 h-200"
          />
        </view>
        <view
          class="bg-white p-20rpx text-28 border-rd-32rpx"
        >
          <view
            class="text-32 font-700 flex items-center gap-10rpx color-#1b1b1b"
          >
            <view>
              {{ curData.type }} <text class="text-24 color-#606266 font-300">
                ({{ curData.time }})
              </text>
            </view>

            <u-rate
              :model-value="curData?.fortune?.all"
              active-color="#f4829b"
              size="16"
              inactive-color="#fce6f0"
              readonly
            />
          </view>
          <view
            class="flex flex-wrap gap-40rpx mt-20rpx"
          >
            <process
              class="w-47%"
              name="爱情"
              :num="curData?.index?.love"
            />
            <process
              class="w-47%"
              name="财富"
              :num="curData?.index?.money"
              line-color="#facaba"
              line-bg-color="#fff3e7"
            />
            <process
              class="w-47%"
              name="事业"
              :num="curData?.index?.work"
              line-color="#bbccfb"
              line-bg-color="#e7ebfd"
            />
            <process
              class="w-47%"
              name="健康"
              :num="curData?.index?.health"
              line-color="#80d9b6"
              line-bg-color="#daf1e8"
            />
          </view>
        </view>
        <view
          class="bg-white p-20rpx text-28 flex flex-col gap-20rpx border-rd-32rpx"
        >
          <view
            class="text-32 font-700 clor-#1b1b1b"
          >
            幸运物
          </view>
          <view class="flex flex-wrap gap-20rpx">
            <view
              class="text-24 p-20rpx w-48% border-rd-16rpx bg-#e7ecff flex items-center justify-between"
            >
              <view class="flex flex-col gap-10rpx">
                <view
                  class="font-700 color-#6a6c6f"
                >
                  {{ curData.luckycolor }}
                </view>
                <view class="font-700 color-#999">
                  幸运颜色
                </view>
              </view>
              <image
                src="@/static/image/color.svg"
                class="w-50 h-50"
                mode=""
              />
            </view>
            <view
              class="text-24 p-20rpx w-48% border-rd-16rpx bg-#ffe6ef flex items-center justify-between"
            >
              <view class="flex flex-col gap-10rpx">
                <view
                  class="font-700 color-#6a6c6f"
                >
                  {{ curData.luckynumber }}
                </view>
                <view class="color-#999">
                  幸运数字
                </view>
              </view>
              <image
                src="@/static/image/number.svg"
                class="w-50 h-50"
                mode=""
              />
            </view>
          </view>
        </view>
        <view
          class="bg-white p-20rpx text-28 flex flex-col gap-20rpx border-rd-32rpx"
          v-for="(item,index) in fortunetext"
          :key="index"
        >
          <view
            class="text-32 font-700 color-#1b1b1b"
          >
            {{ item.title }}
          </view>
          <view
            style="line-height: 1.5;"
            class="text-28 color-#aaa"
          >
            {{ item.content }}
          </view>
        </view>
      </view>
    </template>
  </x-layout>
</template>

<script setup>
import process from './process.vue'
import { onLoad } from '@dcloudio/uni-app'
import { useRequest } from '@/hooks'
import { horoscope } from '@/api/vvan'
import { ref } from 'vue'
import { getImg } from '@/utils/tools.js'

const curData = ref({})
const curBgColor = ref('#f5f7f9')
const curUrl = ref('')
const curDay = ref('')
const fortunetext = ref([])

onLoad((options) => {
  curBgColor.value = options.color
  curUrl.value = getImg(`xinzuo/img${options.index}.png`)
  curDay.value = options.day
  if (options.type) {
    getYunShi(options.type)
  }
})

const getYunShi = async (type) => {
  const { data = {} } = await useRequest(horoscope, { type, time: 'today' })
  const _fortunetext = data?.fortunetext || {}
  const fortMap = {
    all: '综合运势',
    love: '爱情运势',
    work: '学业工作',
    money: '财富运势',
    health: '健康运势'
  }
  curData.value = data
  fortunetext.value = Object.keys(_fortunetext).map(item => {
    return {
      title: fortMap[item],
      content: _fortunetext[item]
    }
  })
}
</script>

<style lang="scss" scoped>

</style>
